<template>
  <div>
    <div class="row q-gutter-xs" :class="{ 'justify-center': center }">
      <div class="col-auto"
           v-for="(item, index) in diffs"
           :key="index">
        <span :style="{ width: size + 'px', height: size + 'px', lineHeight: size + 'px'}"
              :class="`text-white text-caption shadow-10 diff-circle bg-${item.type.toLowerCase()}`"
              round>{{ item.level }}</span>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'DiffIconList',
    props: {
      diffs: {
        required: true
      },
      size: {
        type: Number,
        default: 42
      },
      center: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .diff-circle
    display inline-block
    border-radius 50%
    text-align center
</style>
